<template>
  <div class="wrapper">
    <el-button type="text" @click="dialogTeacherVisible = true">查看教师信息</el-button>
    <el-dialog :visible.sync="dialogTeacherVisible" width="650px" class="wer">
      <div class="el-wrap">
        <div class="el-left">
          <circle-img :src="'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537187971133&di=d9bb56f08608e5e06f80cfbc42fa9b01&imgtype=0&src=http%3A%2F%2Fwenwen.soso.com%2Fp%2F20110724%2F20110724190053-826652309.jpg'"></circle-img>
          <div class="form-msg">
            <label for="name">姓名：</label>
            <span>{{msg.teaName}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">性别：</label>
            <span>{{msg.teaGender}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">教师号：</label>
            <span>{{msg.teaNo}}</span>
          </div>
        </div>
        <div class="el-right">
          <div class="form-msg">
            <label for="sex">学院：</label>
            <span>{{msg.colName}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">职称：</label>
            <span>{{msg.teaTitle}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">研究方向：</label>
            <span>{{msg.teaResearch}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">联系方式：</label>
            <span>{{msg.teaPhone}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">邮箱：</label>
            <span>{{msg.teaEmail}}</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-button type="text" @click="dialogStudentVisible = true">查看学生信息</el-button>
    <el-dialog :visible.sync="dialogStudentVisible" width="650px" class="wer">
      <div class="el-wrap">
        <div class="el-left">
          <circle-img :src="'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537187971133&di=d9bb56f08608e5e06f80cfbc42fa9b01&imgtype=0&src=http%3A%2F%2Fwenwen.soso.com%2Fp%2F20110724%2F20110724190053-826652309.jpg'"></circle-img>
          <div class="form-msg">
            <label for="name">姓名：</label>
            <span>{{datas.stuName}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">性别：</label>
            <span>{{datas.stuGender}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">学号：</label>
            <span>{{datas.stuNo}}</span>
          </div>
        </div>
        <div class="el-right">
          <div class="form-msg">
            <label for="sex">学院：</label>
            <span>{{datas.colName}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">专业：</label>
            <span>{{datas.stuMajor}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">班级：</label>
            <span>{{datas.stuClass}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">联系方式：</label>
            <span>{{datas.stuPhone}}</span>
          </div>
          <div class="form-msg">
            <label for="sex">邮箱：</label>
            <span>{{datas.stuEmail}}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CircleImg from '@/common/CircleImg.vue'
export default {
  name: "check",
  components: {
    CircleImg
  },
  data () {
    return {
      dialogTeacherVisible: false,
      dialogStudentVisible: false,
      msg: {
        teaName: "刘安光",
        teaGender: "男",
        teaNo: "15070841",
        teaTitle: "教授",
        colName: "大数据学院",
        teaResearch: "Java WEB 开发",
        teaPhone: "18328635851",
        teaEmail: "1713862733@qq.com"
      },
      datas: {
        stuNo: "1507084143",
        stuName: "123",
        stuGender: "男",
        colName: "大数据学院",
        stuMajor: "网络工程",
        stuClass: "15070841",
        stuPhone: "18328635851",
        stuEmail: "123@qq.com"
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.wer >>> .el-dialog__header
  text-align: center;
  height: 33px;
  letter-spacing: 2px;
  font-size: 25px;


.wer >>> .el-dialog__body
  padding-bottom: 60px;
  padding-top: 20px;


.wer >>> .el-dialog__close
  display: none;


.wer >>> .el-dialog
  background: url('../assets/1.jpg') center / cover no-repeat;
  // background-image: linear-gradient(top,rgba(5E,FC,E8,0),rgba(73,6E,FE,.5))


.el-wrap
  width: 100%;
  height: 300px;
  font-size: 17px;

  .el-left
    float: left;
    margin-left: 41px;
    text-align: center;
    width: 213px;
    height: 100%;
    border-right: 5px solid #ccc;


  .el-right, .el-left
    .form-msg
      margin: 10px;
      margin-top: 30px;
      letter-spacing: 1px;
      text-align: left;
      text-indent: 1em;
  .el-left
    .form-msg
      margin-top: 22px

  .el-right
    float: right;
    width: 330px;
    height: 100%;
    padding-left: 5px;


</style>

